<template>
	<view class="info-page">
		<form class="form">
			<input class="ipt height-90 radius-45 mb-32" v-model="form.username" placeholder="请输入姓名" />
			<view class="gender-box mb-32">
				<view @tap="genderClick(1)" :class="{'gender': true, 'active': form.gender === 1}">男</view>
				<view @tap="genderClick(2)" :class="{'gender': true, 'active': form.gender === 2}">女</view>
			</view>
      <input class="ipt height-90 radius-45 mb-32" v-model="form.birthday" readonly placeholder="请输入出生日期" @click="bindDateChange"/>
			<textarea class="txt mb-32" v-model="form.address" placeholder="请输入地址"></textarea>
			<view class="btn height-90 radius-45" @tap="onConfirm">确认</view>
		</form>
    <!--日期选择器-->
    <u-picker v-model="showTimes" mode="time" :defaultTime="form.birthday" :params="params" @confirm="gettimes($event)" confirm-color="#000" :default-time="form.birthday"></u-picker>

  </view>
</template>

<script>
	import utils from '@/shopro/utils/tools.js'
	export default {
		data() {
			return {
				gender: 0,
				form: {
					username: '',
					gender: 1,
					birthday: '',
					address: ''
				},
				maxDate: '',
        isEdit:'',
        params: {
          year: true,
          month: true,
          day: true,
          hour: false,
          minute: false,
          second: false,
          province: false,
          city: false,
          area: false,
          // 选择时间的时间戳
          timestamp: true,
        },
        showTimes:false
			};
		},
		onShow() {
			this.init()
		},
    onLoad(){
      this.options = this.$Route.query;
      this.isEdit = this.options.type ? this.options.type : 0;
      console.log("=======this.isEdit",this.isEdit,this.options)
      this.isEdit && this.getUserInfo();
    },
		methods: {
			init() {
				this.maxDate = utils.formatDate(new Date(), 'yyyy-MM-dd')
			},
			genderClick(val) {
				this.form.gender = val
			},
      gettimes(e){
        this.form.birthday = `${e.year}-${e.month}-${e.day}`
      },
			bindDateChange(e) {
        if(!this.form.birthday){
          this.timestampToTime(Number(new Date()))
        }
        this.showTimes = true
			},
      timestampToTime(timestamp) {
        let Y ,M,D
        var date = new Date(timestamp);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
        console.log("===date",date)
        Y = date.getFullYear() + '-';
        M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
        D = date.getDate();
        this.form.birthday = Y+M+D;
        console.log("=times",this.form.birthday)
      },
			showMsg(title) {
				uni.showToast({
					title: title,
					icon:'none'
				})
			},
			onConfirm() {
				if (this.form.username == '') return this.showMsg('请输入姓名')
				if (this.form.birthday == '') return this.showMsg('请输入出生日期')
				if (this.form.address == '') return this.showMsg('请输入地址')
				this.$https('member.complateInfo', this.form, '请稍后...').then(res => {
					if (res.code === 1) {
						this.showMsg('保存成功')
						uni.navigateBack({
							delta: 1
						})
					}
				})
			},
      getUserInfo(){

        this.$https('member.getMyInfo', {token: uni.getStorageSync('token')} ,'请稍后...').then(res => {
          if (res.code === 1) {
           this.form = res.data
          }
        })
      }
		}
	}
</script>

<style lang="scss" scoped>
.info-page {
	background-color: #fff;
	padding: 0 54upx 0 56upx;
	height: 100%;
	.form {
		padding-top: 32upx;
	}
	.mb-32 {
		margin-bottom: 32upx;
	}
	.height-90 {
		height: 90upx;
	}
	.radius-45 {
		border-radius: 45upx;
	}
	.gender-box {
		display: flex;
		justify-content: space-between;
		.gender {
			width: 300upx;
			height: 90upx;
			background: #F5F5F5;
			font-size: 32upx;
			color: #B5B5B5;
			line-height: 90upx;
			text-align: center;
			border-radius: 45upx;
			&.active {
				background: #010101;
			}
		}
	}
	.ipt {
		width: 640upx;
		background: #F5F5F5;
		padding: 0 32upx;
		font-size: 32upx;
		color: #B5B5B5;
	}
	.txt {
		width: 640upx;
		height: 210upx;
		background: #F5F5F5;
		border-radius: 32upx;
		padding: 24upx 32upx;
	}
	.btn {
		margin-top: 128upx;
		width: 640upx;
		background: #010101;
		color: #B5B5B5;
		font-size: 36upx;
		line-height: 90upx;
		text-align: center;
	}
}
</style>
